<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-notice-bar text="这是一条通知信息" />
      </view>
    </view>
    
    <!-- 不同主题 -->
    <view class="demo-block">
      <view class="demo-block__title">不同主题</view>
      <view class="demo-block__content">
        <fu-notice-bar
          text="这是一条通知信息"
          type="info"
          class="notice-item"
        />
        <fu-notice-bar
          text="这是一条警告信息"
          type="warning"
          class="notice-item"
        />
        <fu-notice-bar
          text="这是一条错误信息"
          type="error"
          class="notice-item"
        />
      </view>
    </view>
    
    <!-- 可关闭 -->
    <view class="demo-block">
      <view class="demo-block__title">可关闭</view>
      <view class="demo-block__content">
        <fu-notice-bar
          v-model:show="show"
          text="这是一条可以关闭的通知"
          closeable
        />
      </view>
    </view>
    
    <!-- 滚动播放 -->
    <view class="demo-block">
      <view class="demo-block__title">滚动播放</view>
      <view class="demo-block__content">
        <fu-notice-bar
          text="这是一条很长的通知信息，超出后会自动滚动播放，文字内容比较多的时候可以使用滚动播放功能"
          scrollable
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    overflow: hidden;
  }
}

.notice-item {
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}
</style> 